<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>

         ul {
             list-style: none;
             margin:0;
             padding:0;
         }
         .box {
              width: 300px;
              height: 300px;
              margin: 150px auto;
              position: relative;
              font-size: 50px;
              /*perspective: 1000px;*/
              transform-style: preserve-3d;

              animation: rotate 10s linear infinite alternate;
         }
        
         .box>div {
              width: 300px;
              height: 300px;
              position: absolute;
         }
         .right {
             background-color: transparent;
             transform: rotateY(90deg) translateZ(150px);
         }
         .left {
             background-color: transparent;
             transform: rotateY(-90deg) translateZ(150px);
         }

         .top {
              background-color: transparent;
              transform: rotateX(90deg) translateZ(150px);
         }

        .bottom {
             background-color: transparent;
             transform: rotateX(-90deg) translateZ(150px);
        }

        .before {
             background-color: transparent;
             transform: translateZ(150px);
        }

        .back {
             background-color: transparent;
             transform: translateZ(-150px);
        }

        li {
             float: left;
             width: 90px;
             height: 90px;
             border-radius: 20px;
             margin: 5px;
             text-align: center;
             line-height: 90px;
        }

        .before li {
            background-color: green;
        }
         .back li {
             background-color:chartreuse;
         }

         .top li {
              background-color: purple;
         }

         .bottom li {
              background-color: cornflowerblue;
         }

         .left li {
              background-color: darkorange;
         }

         .right li {
              background-color: #37ffc7;
         }

        .box:hover {
             animation-play-state: paused;
        }
        
        @keyframes rotate {
            0% {
                transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
            }

            20% {
                transform: rotateY(30deg) rotateX(40deg) rotateZ(20deg);
            }

            40% {
                transform: rotateY(-60deg) rotateX(-40deg) rotateZ(-20deg);
            }

            60% {
                transform: rotateY(145deg) rotateX(80deg) rotateZ(10deg);
            }

            80% {
                transform: rotateY(90deg) rotateX(60deg) rotateZ(-20deg);
            }

            100% {
                transform: rotateY(135deg) rotateX(-45deg) rotateZ(30deg);
            }
        }
    </style>
</head>
<body>
        <div class="box">
            <div class="before">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                </ul>
            </div>
            <div class="back">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                </ul>
            </div>
            <div class="top">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                </ul>
            </div>
            <div class="bottom">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                </ul>
            </div>
            <div class="left">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                </ul>
            </div>
            <div class="right">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                </ul>
            </div>
        </div>
</body>
</html>